﻿
@{
    ViewBag.Title = "运营商审核列表";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}

<link rel="stylesheet" href="~/Content/css/frozenui.css">
<link rel="stylesheet" href="~/Content/css/style.css">
<link rel="stylesheet" href="~/Content/css/swiper.min.css">
<link rel="stylesheet" href="~/Content/css/dropload.css">
<script src="~/Content/script/swiper.min.js"></script>
<script src="~/Content/script/dropload.min.js"></script>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    html, body {
        position: relative;
        height: 100%;
    }

    li, a {
        list-style: none;
        text-decoration: none;
    }

    .swiper-container {
        width: 100%;
    }

    #nav {
        background: #fff;
    }

        #nav .swiper-wrapper {
            padding-top: 0.3rem;
            height: 2.48rem;
            box-sizing: border-box;
            margin: 0;
            /*line-height: 1.6rem;*/
            border-bottom: 2px solid #dfe0e1;
        }

        #nav li {
            text-align: center;
            color: #424242;
            font-size: 0.63rem;
        }

            #nav li span {
                color: #3597D9;
            }

        #nav .active-nav {
            color: #2ECA70;
            border-bottom: 2px solid #2ECA70;
        }

            #nav .active-nav span {
                color: #2ECA70;
            }

    #page {
        position: absolute;
        top: 5.8rem;
        left: 0;
        right: 0;
        bottom: 55px;
        overflow: hidden;
    }

        #page .swiper-slide {
            text-align: center;
            font-size: 30px;
            overflow-y: scroll;
            position: relative;
        }

        #page .list li {
            padding: 15px 8px 15px;
            border-bottom: 1px solid #d4d4d4;
            box-sizing: border-box;
        }

            #page .list li a {
                display: block;
            }

            #page .list li div {
                display: flex;
                justify-content: space-between;
            }

                #page .list li div h3 {
                    color: #000;
                    font-size: 0.7rem;
                }

                #page .list li div h4 {
                    flex: 0 25%;
                    font-size: 0.7rem;
                    color: #3597D9;
                }

        #page .list li {
            background: #fff;
        }

            #page .list li p {
                text-align: left;
                font-size: 0.5rem;
                color: #777;
                line-height: 1rem;
            }

    #seacher {
        display: flex;
        justify-content: space-between;
        padding: 6px 8px;
        background: #E9EDF0;
        height: 1.32rem;
        box-sizing: content-box;
    }

        #seacher input {
            margin-right: 10px;
            width: 80%;
            background: #fff;
            border: none;
            border-radius: 5px;
            outline: none;
            box-sizing: border-box;
            padding: 0 10px;
            text-align: center;
            font-size: 0.6rem;
            height: 1.32rem;
        }

        #seacher button {
            width: 20%;
            border-radius: 4.96px;
            border: none;
            background: #2ECA70;
            color: #fff;
            outline: none;
            line-height: 1.32rem;
            font-size: 0.6rem;
            height: 1.32rem;
        }

            #seacher button img {
                width: 0.7rem;
                vertical-align: text-top;
                display: inline;
            }

    #timeRadio {
        display: flex;
        padding: 2px 2px;
        height: 1.32rem;
        box-sizing: content-box;
    }

        #timeRadio .ui-radio {
            margin-right: 0.72rem;
            line-height: 1.32rem;
            font-size: 0.50rem;
            color: #424242;
            font-weight: bold;
        }

            #timeRadio .ui-radio input {
                width: 1rem;
                height: 1rem;
                top: -2px;
                margin-right: 5px;
            }

                #timeRadio .ui-radio input:before {
                    width: 0.9rem;
                    height: 0.9rem;
                    background: #fff;
                    left: 0.05rem;
                    top: 0.05rem;
                    border-radius: 0.5rem;
                }

                #timeRadio .ui-radio input:checked:after {
                    width: 0.5rem;
                    height: 0.5rem;
                    background: #2ECA70;
                    border: 1px solid #2ECA70;
                    border-radius: 0.4rem;
                    left: 0.25rem;
                    top: 0.25rem;
                }
</style>

<style>
    .slidepage {
        /*margin-top: 40px;*/
        height: 100%;
        overflow: auto;
    }

        .slidepage div {
            /*height: 100px;*/
        }

            .slidepage div:nth-child(2n) {
                background: #ccc;
            }

    .jiazai {
        /*display:none;*/
        opacity: 0;
    }

        .jiazai.active {
            opacity: 1;
            /*display:block;*/
        }

    .jiazaiwan {
        display: none;
        opacity: 0;
    }

        .jiazaiwan.active {
            opacity: 1;
            display: block;
        }
</style>



<div id="seacher">
    <input id="Msg" type="text" placeholder="请输入工单信息查询">
    <button id="Search"><img src="~/Content/image/search (1).png" alt="Alternate Text" />&nbsp;搜索</button>
</div>
<div id="timeRadio">

    <label class="ui-radio" for="radio">
        <input type="radio" name="radio" value="0" />全部
    </label>
    <label class="ui-radio" for="radio">
        <input type="radio" checked="" name="radio" value="1" id="radio1" />今日
    </label>
    <label class="ui-radio" for="radio">
        <input type="radio" name="radio" value="-1" />昨日
    </label>
    <label class="ui-radio" for="radio">
        <input type="radio" name="radio" value="7" />一周
    </label>
    @*<label class="ui-radio" for="radio">
            <input type="radio" name="radio" value="15" />半月
        </label>*@
    <label class="ui-radio" for="radio">
        <input type="radio" name="radio" value="30" />本月
    </label>
</div>
<div id="nav" class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide ">所有状态<br />(<span id="noExtTotal">0</span>)</li>
        <li class="swiper-slide active-nav ">未审核<br />(<span id="exingTotal">0</span>)</li>
        <li class="swiper-slide">审核通过<br />(<span id="completelyTotal">0</span>)</li>
        <li class="swiper-slide">审核不通过<br />(<span id="audiuTotal">0</span>)</li>
    </ul>
</div>
<div class="swiper-container" id="page">
    <div class="swiper-wrapper">
        <div class="swiper-slide slidepage" id="slidepage0">
            <ul class="list" id="noEx"></ul>
            <div class="weui-loadmore jiazai" id="loadmore0">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
            <div class="weui-loadmore weui-loadmore_line jiazaiwan" id="loadmore00">
                <span class="weui-loadmore__tips">暂无数据</span>
            </div>
        </div>
        <div class="swiper-slide slidepage" id="slidepage1">
            <ul class="list" id="exeing"></ul>
            <div class="weui-loadmore jiazai" id="loadmore1">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
            <div class="weui-loadmore weui-loadmore_line jiazaiwan" id="loadmore11">
                <span class="weui-loadmore__tips">暂无数据</span>
            </div>
        </div>
        <div class="swiper-slide slidepage" id="slidepage2">
            <ul class="list" id="completely"></ul>
            <div class="weui-loadmore jiazai" id="loadmore2">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
            <div class="weui-loadmore weui-loadmore_line jiazaiwan" id="loadmore22">
                <span class="weui-loadmore__tips">暂无数据</span>
            </div>
        </div>
        <div class="swiper-slide slidepage" id="slidepage3">
            <ul class="list" id="audiu"></ul>
            <div class="weui-loadmore jiazai" id="loadmore3">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
            <div class="weui-loadmore weui-loadmore_line jiazaiwan" id="loadmore33">
                <span class="weui-loadmore__tips">暂无数据</span>
            </div>
        </div>
    </div>

</div>
<script>
    var menuIndex = 0;//全局变量 工单状态索引,默认为0,方便搜索时候使用
    var radioValue = 1;//全局变量，日期时间
    var times = 1;//默认当天
    var tab0TopNum = 1;//sql页数查询字段（分页数据最大值）
    var tab1TopNum = 1;
    var tab2TopNum = 1;
    var tab3TopNum = 1;
    var menuIndex = 0;//页面tab选项 0：待接单 1：执行中 2：已结单 3：已审核
    var paraStr = "";//搜索内容

    var isload0 = false;
    var isload1 = false;
    var isload2 = false;
    var isload3 = false; //滚动刷新锁  ajax 加载的时候设为true 加载成功设为false

    //getAlarmList1(0);
    //getAlarmList(7, '');//初始化，默认本周
    //setInterval(function () {
    //    getAlarmList(7, '');//初始化，默认本周
    //}, 30 * 60 * 1000);//30分钟实时刷新

    (function (designWidth, maxWidth) {
        var html = document.getElementsByTagName("html")[0];
        var tid;
        function refreshRem() {
            var width = html.getBoundingClientRect().width;
            //  console.log(width / 15)
            html.style.fontSize = width / 15 + "px"
        }
        window.addEventListener("resize", function () {
            clearTimeout(tid); //防止执行两次
            tid = setTimeout(refreshRem, 300);
        }, false);
        refreshRem();
    })();

    //工单状态tap点击事件
    (function (doc, win) {
        var size = 10;
        var myNav = new Swiper('#nav', {
            spaceBetween: 10,
            slidesPerView: 4,
            watchSlidesProgress: true,
            watchSlidesVisibility: true,
            on: {
                tap: function () {
                    menuIndex = myNav.clickedIndex;
                    myPage.slideTo(myNav.clickedIndex);
                }
            }
        });

        ////工单状态滑动事件
        var myPage = new Swiper('#page', {
            on: {
                slideChangeTransitionStart: function () {
                    updateNavPosition()
                }
            }
        });

        //工单状态滑动方法
        function updateNavPosition() {
            $('#nav .active-nav').removeClass('active-nav');
            var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
            menuIndex = activeNav.index();

            if (!activeNav.hasClass('swiper-slide-visible')) {
                if (activeNav.index() >= myNav.activeIndex) {
                    var thumbsPerNav = Math.floor(myNav.width / activeNav.width()) - 1
                    myNav.slideTo(activeNav.index() - thumbsPerNav)
                } else {
                    myNav.slideTo(activeNav.index())
                }
            }
        }
        myPage.slideTo(1);
    })(document, window);


    //var datalist = "";
    //给页面数量赋值
    function getAlarmCount(times, paraStr) {

        //ajax参数
        var paramdata = {
            times: times,
            paraStr: paraStr
        };
        $.ajax({
            url: '/api/Annouce/GetAlarmCounts_AnnounceTeleAudit',
            type: 'get',
            data: paramdata,
            error: function (data) {
                console.log(JSON.stringify(data));
            },
            success: function (data) {
                var result = eval(data.Data);
                if (result.code == 100) {
                    return;
                } else {
                    //给工单状态数量赋值
                    $("#noExtTotal").html(result.noExtTotal);
                    $("#exingTotal").html(result.exingTotal);
                    $("#completelyTotal").html(result.completelyTotal);
                    $("#audiuTotal").html(result.audiuTotal);
                }
            }
        })
    }
    var dropload = []
    //radio点击事件
    $(':radio').click(function () {
        //   if (isload0 && isload1 && isload1 && isload1) { isload0 = false; isload1 = false; isload2 = false; isload3 = false;console.log("TT") };

        $('.jiazai').addClass('active')
        $('.jiazaiwan').removeClass('active')
        paraStr = "";
        $("#Msg").val('');
        radioValue = $(this).val()  //获取选中的radio的值
        times = radioValue;

        $('.slidepage').eq(0).children("ul").empty();
        $('.slidepage').eq(1).children("ul").empty();
        $('.slidepage').eq(2).children("ul").empty();
        $('.slidepage').eq(3).children("ul").empty();
        tab0TopNum = 1;
        tab1TopNum = 1;
        tab2TopNum = 1;
        tab3TopNum = 1;
        getAlarmList(0);
        getAlarmList(1);
        getAlarmList(2);
        getAlarmList(3);
        getAlarmCount(times, paraStr);

    });

    //搜索
    $("#Search").click(function () {
        $('.jiazai').addClass('active')
        $('.jiazaiwan').removeClass('active')
        var Msg = $("#Msg").val().trim();
        paraStr = Msg;
        $('.slidepage').eq(0).children("ul").empty();
        $('.slidepage').eq(1).children("ul").empty();
        $('.slidepage').eq(2).children("ul").empty();
        $('.slidepage').eq(3).children("ul").empty();
        tab0TopNum = 1;
        tab1TopNum = 1;
        tab2TopNum = 1;
        tab3TopNum = 1;
        getAlarmList(0);
        getAlarmList(1);
        getAlarmList(2);
        getAlarmList(3);
        getAlarmCount(times, paraStr);
        //paraStr = "";
    })








    //数据分页加载函数
    function getAlarmList(menuIndex) {
        console.log("getAlarmList---" + menuIndex)
        var UrpApi = '/api/Annouce/GetAnnounceListsByPage_AnnounceTeleAudit'
        //debugger
        switch (menuIndex) {
            case 0://全部
                if (isload0) break;
                isload0 = true;
                $.ajax({
                    url: UrpApi,
                    type: 'get',
                    data: { times: times, pagesize: 20, topNum: tab0TopNum, menuIndex: menuIndex, paraStr: paraStr },
                    success: function (data) {
                        console.log("getAlarmList-success--" + menuIndex)
                        console.log(data)
                        var result = eval(data.Data);
                        console.log(result)
                        var datalist = '';
                        if (result.noExtTotal != 0) {
                            result.noEx.forEach(function (d, i) {
                                datalist += getDivHtml(d)
                                tab0TopNum = d.Id;
                            });
                            $('#loadmore0').removeClass('active') //取消显示 加载数据div
                            $('#loadmore00').removeClass('active') //取消显示 无数据数据div
                        }// 如果没有数据
                        else {
                            $('#loadmore00').addClass('active') //显示 无数据数据div
                            $('#loadmore0').removeClass('active') //取消显示 加载数据div
                        }
                        //setTimeout(function () {
                        // 插入数据到页面，放到最后面
                        $('.slidepage').eq(menuIndex).children("ul").append(datalist);
                        datalist = '';
                        isload0 = false;
                    },
                    error: function (data) {
                        isload0 = false;
                    }
                })
                break;
            case 1: //待审核
                if (isload1) break;
                isload1 = true;
                $.ajax({
                    url: UrpApi,
                    type: 'get',
                    data: { times: times, pagesize: 20, topNum: tab1TopNum, menuIndex: menuIndex, paraStr: paraStr },
                    success: function (data) {
                        console.log("getAlarmList-success--" + menuIndex)
                        console.log(data)
                        var result = eval(data.Data);
                        var datalist = '';
                        if (result.exingTotal != 0) {
                            result.exeing.forEach(function (d, i) {
                                datalist += getDivHtml(d)
                                tab1TopNum = d.Id;
                            });
                            $('#loadmore1').removeClass('active') //取消显示 加载数据div
                            $('#loadmore11').removeClass('active') //取消显示 无数据数据div
                        }// 如果没有数据
                        else {
                            $('#loadmore11').addClass('active') //显示 无数据数据div
                            $('#loadmore1').removeClass('active') //取消显示 加载数据div
                        }
                        // 插入数据到页面，放到最后面
                        $('.slidepage').eq(menuIndex).children("ul").append(datalist);
                        datalist = '';
                        isload1 = false;
                    },
                    error: function (data) {
                        isload1 = false;
                    }
                })
                break;
            case 2: //审核通过
                if (isload2) break;
                isload2 = true;
                $.ajax({
                    url: UrpApi,
                    type: 'get',
                    data: { times: times, pagesize: 20, topNum: tab2TopNum, menuIndex: menuIndex, paraStr: paraStr },
                    success: function (data) {
                        console.log("getAlarmList-success--" + menuIndex)
                        var result = eval(data.Data);
                        var datalist = '';
                        if (result.completelyTotal != 0) {
                            result.completely.forEach(function (d, i) {
                                datalist += getDivHtml(d)
                                tab2TopNum = d.Id;
                            });
                            $('#loadmore2').removeClass('active') //取消显示 加载数据div
                            $('#loadmore22').removeClass('active') //取消显示 无数据数据div
                        }// 如果没有数据
                        else {
                            $('#loadmore22').addClass('active') //显示 无数据数据div
                            $('#loadmore2').removeClass('active') //取消显示 加载数据div
                        }
                        //setTimeout(function () {
                        // 插入数据到页面，放到最后面
                        $('.slidepage').eq(menuIndex).children("ul").append(datalist);
                        datalist = '';
                        isload2 = false;
                    },
                    error: function (data) {
                        isload2 = false;
                    }
                })
                break;
            case 3: //审核不通过
                if (isload3) break;
                isload3 = true;
                $.ajax({
                    url: UrpApi,
                    type: 'get',
                    data: { times: times, pagesize: 20, topNum: tab3TopNum, menuIndex: menuIndex, paraStr: paraStr },
                    success: function (data) {
                        console.log("getAlarmList-success--" + menuIndex)
                        var result = eval(data.Data);
                        var datalist = '';
                        if (result.audiuTotal != 0) {
                            result.audiu.forEach(function (d, i) {
                                datalist += getDivHtml(d)
                                tab3TopNum = d.Id;
                            });
                            $('#loadmore3').removeClass('active') //取消显示 加载数据div
                            $('#loadmore33').removeClass('active') //取消显示 无数据数据div
                        }// 如果没有数据
                        else {
                            $('#loadmore33').addClass('active') //显示 无数据数据div
                            $('#loadmore3').removeClass('active') //取消显示 加载数据div
                        }
                        // 插入数据到页面，放到最后面
                        $('.slidepage').eq(menuIndex).children("ul").append(datalist);
                        datalist = '';
                        isload3 = false;
                    },
                    error: function (data) {
                        isload3 = false;
                    }
                })
                break;
        }
    }
    function Initialize() {

        //getAlarmList(0);
        //getAlarmList(1);
        //getAlarmList(2);
        //getAlarmList(3);
        //getAlarmCount(times, '');

        $("radio1").click()
    }
    $(document).ready(function () {
        Initialize();

    })

    //滚动刷新
    $(document).ready(function () {
        var $el = $("#slidepage0");
        var menuIndex = 0;
        loadData($el, function () {
            if (isload0) return false;
            $('#loadmore0').addClass('active')
            getAlarmList(menuIndex);//加载数据

        });
    })

    $(document).ready(function () {
        var menuIndex = 1;
        var $el = $("#slidepage1");
        loadData($el, function () {
            if (isload1) return false;
            //isload1 = true;
            $('#loadmore1').addClass('active')
            getAlarmList(menuIndex);
            //isload1 = false;

        });
    })

    $(document).ready(function () {
        var menuIndex = 2;
        var $el = $("#slidepage2");
        loadData($el, function () {
            if (isload2) return false;
            $('#loadmore2').addClass('active')
            getAlarmList(menuIndex);

        });
    })

    $(document).ready(function () {
        var menuIndex = 3;
        var $el = $("#slidepage3");
        loadData($el, function () {
            if (isload3) return false;
            $('#loadmore3').addClass('active')
            getAlarmList(menuIndex);
        });
    })
    function loadData($el, callback, config) {
        config = config || {};
        config.difference = config.difference || 20;
        var timer = null;
        $el.scroll(function (e) {
            //  console.log("loadData--事件节流")
            // 事件节流
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                var $content = $(this)[0];
                var scrollHeight = $content.scrollHeight;
                var scrollTop = $content.scrollTop + $el.height();
                if (scrollTop + config.difference > scrollHeight) {
                    callback && callback();
                }
            }, 300);
        });
    }

    //整理显示的Div html
    function getDivHtml(d) {
        var executionDate = d.ExecutionDate.replace('T', ' ').replace(/.\d+$/, ' ');//时间处理
        var str = "<li><a href='/AnnounceTeleAudit/Detail?annouceCode=" + d.AnnounceCode + "&Id=" + d.Id + "'><div>" +
            "<h3>" + d.BaseStation + "</h3></div>" +
            "<p>接单人:" + d.AcceptPersonName + "</p>" +
            "<p>所属运营商:" + getCompanyType(d.GenerationForCompanyType) + "</p >" +
            "<p>工单状态:" + getAnnState(d.AnnounceStatus) + "</p>" +
            "<p>平台工单号:" + d.AnnounceCode + "</p>" +
            "<p>停电告警时间:" + executionDate + "</p>" +
            "<p>运维系统工单号:" + d.JobNumber + "</p>" +
            "</a></li>"


        return str;
    }
    function getAnnState(d) {

        var Statestr = "";
        switch (d) {
            case 29: Statestr = "未审核"; break;
            case 30: Statestr = "审核通过"; break;
            case 31: Statestr = "审核不通过"; break;

        }
        return Statestr
    }
    function getCompanyType(d) {

        var Statestr = "";
        switch (d) {
            case 4: Statestr = "移动"; break;
            case 5: Statestr = "联通"; break;
            case 6: Statestr = "电信"; break;

        }
        return Statestr
    }



</script>


